<template>
  <div class="tag-wall">
    <div 
      class="tag-cloud" 
      ref="wrapper"
      @mouseenter="stopRotate"
      @mouseleave="startRotate"
    >
      <p
        v-for="(tag, index) in tags"
        :key="tag.tagId"
        ref="tagElements"
        @click="clickTag(tag.tagId,tag.tagName)"
        @mouseenter="handleTagHover(index)"
        @mouseleave="handleTagLeave"
        :class="{ 'tag-dimmed': hoveredIndex !== null && hoveredIndex !== index }"
      >
        {{ tag.tagName }}
      </p>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    tags: {
      type: Array,
      default: () => [],
      validator: value => {
        return value.every(tag => tag.tagId && tag.tagName)
      }
    }
  },
  
  watch: {
    tags: {
      immediate: true,
      deep: true,
      handler() {
        this.$nextTick(this._initTags)
      }
    }
  },
  data() {
    return {
      // 移除这行重复的tags定义
      // tags: [],
      option: {
        radius: 140,
        maxFont: 30,
        color: null,
        rotateAngleXbase: 600,
        rotateAngleYbase: 600,
      },
      tagPositions: [],
      isRotating: true,
      hoveredIndex: null,
      timer: null
    };
  },
  mounted() {
    // 移除fetchTags调用
    this.$nextTick(() => {
      this._initTags();
    });
  },
  methods: {
    // 移除整个fetchTags方法
    
    _initTags() {
      if (this.tags.length === 0) return;
      
      this.rotateAngleX = Math.PI / this.option.rotateAngleXbase;
      this.rotateAngleY = Math.PI / this.option.rotateAngleYbase;
      this.tagPositions = [];

      const length = this.tags.length;
      const containerWidth = this.$refs.wrapper.offsetWidth;
      const containerHeight = this.$refs.wrapper.offsetHeight;
      const tagWidth = 80;
      const tagHeight = 30;

      for (let i = 0; i < length; i++) {
        let angleX = Math.acos((2 * (i + 1) - 1) / length - 1);
        let angleY = angleX * Math.sqrt(length * Math.PI);
        
        const x = this.option.radius * Math.sin(angleX) * Math.cos(angleY);
        const y = this.option.radius * Math.sin(angleX) * Math.sin(angleY);
        const z = this.option.radius * Math.cos(angleX);
        
        const adjustedX = Math.max(tagWidth/2, Math.min(containerWidth - tagWidth/2, x + containerWidth/2 + 200));
        const adjustedY = Math.max(tagHeight/2, Math.min(containerHeight - tagHeight/2, y + containerHeight/2 + 200));
        
        this.$refs.tagElements[i].style.color = 
          `rgb(${Math.round(255 * Math.random())},
           ${Math.round(255 * Math.random())},
           ${Math.round(255 * Math.random())})`;
        
        this.tagPositions.push({
          x: adjustedX - containerWidth/2,
          y: adjustedY - containerHeight/2,
          z: z,
          ele: this.$refs.tagElements[i],
        });
      }
      this.startRotate();
    },
    setPosition(tag, r, maxFont) {
      if (this.$refs.wrapper && tag.ele) {
        tag.ele.style.transform = `translate(${tag.x}px, ${tag.y}px)`;
        tag.ele.style.opacity = tag.z / r / 2 + 0.7;
        tag.ele.style.fontSize = `${(tag.z / r / 2 + 0.5) * maxFont}px`;
      }
    },
    rotateX(tag) {
      const cos = Math.cos(this.rotateAngleX);
      const sin = Math.sin(this.rotateAngleX);
      const y1 = tag.y * cos - tag.z * sin;
      const z1 = tag.y * sin + tag.z * cos;
      tag.y = y1;
      tag.z = z1;
    },
    rotateY(tag) {
      const cos = Math.cos(this.rotateAngleY);
      const sin = Math.sin(this.rotateAngleY);
      const x1 = tag.z * sin + tag.x * cos;
      const z1 = tag.z * cos - tag.x * sin;
      tag.x = x1;
      tag.z = z1;
    },
    clickTag(tagId,tagName) {
      this.$router.push(`/tag/${tagId}?name=${encodeURIComponent(tagName)}`)
    },
    stopRotate() {
      this.isRotating = false;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    startRotate() {
      if (this.timer) return;
      
      this.isRotating = true;
      const _self = this;
      this.timer = setInterval(function() {
        if (!_self.isRotating) {
          clearInterval(_self.timer);
          _self.timer = null;
          return;
        }
        for (let i = 0; i < _self.tagPositions.length; i++) {
          _self.rotateX(_self.tagPositions[i]);
          _self.rotateY(_self.tagPositions[i]);
          _self.setPosition(_self.tagPositions[i], _self.option.radius, _self.option.maxFont);
        }
      }, 20);
    },
    handleTagHover(index) {
      this.hoveredIndex = index;
    },
    handleTagLeave() {
      this.hoveredIndex = null;
    }
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.tag-wall {
  width: 100%;
  height: 280px;
  margin: 0 auto;
  overflow: hidden;
}

.tag-cloud {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  overflow: visible;
  color: #333;
  text-align: center;
  cursor: default;
}

.tag-cloud p {
  position: absolute;
  top: 0;
  left: 0;
  color: #333;
  font-family: Arial, sans-serif;
  text-decoration: none;
  margin: 0 10px 15px 0;
  line-height: 18px;
  text-align: center;
  font-size: 16px;
  padding: 4px 9px;
  display: inline-block;
  border-radius: 3px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tag-cloud p:hover {
  cursor: pointer;
  text-decoration: underline;
  transform: scale(1.1);
  z-index: 10;
}

.tag-dimmed {
  opacity: 0.05 !important;
}
</style>